<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/resources/css/bootstrap.css">
    <style type="text/css">
        .modal-body {
            max-height: 300px;
            max-width: 600px;
            overflow-y: auto;
            padding: 15px;
            position: relative;
        }
        .catecode {
            width:98%;
            float:left;
        }
        .catecode ul {
            width:100%;
            list-style-type:circle;
        }
        .catecode li {
            width: 33%;
            float: left;
        }

    </style>
</head>
<body>
<div role="navigation" class="navbar navbar-inverse navbar-fixed-top">
</div>
<div class="container theme-showcase">
    <!-- Jumbotron -->
    <div class="jumbotron">
        <h1>Welcome to here</h1>

        <p class="lead">
            请记住，你的唯一ID是<span class="label label-info">${id}</span>,同步的时候，使用此ID。
        </p>
    </div>

    <!-- Example row of columns -->
    <div class="row">

        <div class="col-md-9">
            <form class="form-horizontal" role="form" action="/sync" method="post">
                <div class="control-group">
                    <label for="Detail" class="control-label"><span class="label label-info">Detail</span></label>
                    <div class="controls">
                        <textarea class="form-control" rows="4" id="Detail" name="detail" style="width: 500px;"></textarea>
                    </div>
                </div>
                <div class="control-group">
                    <label for="subject" class="control-label"><span class="label label-info">Subject</span></label>
                    <div class="controls">
                        <input type="text" class="form-control" id="subject" placeholder="subject" name="subject" style="width: 320px;">
                    </div>
                </div>
                <div class="control-group">
                    <label for="keyword" class="control-label"><span class="label label-info">Keyword</span></label>

                    <div class="controls">
                        <input type="text" class="form-control" id="keyword" placeholder="keyword" name="keyword">
                    </div>
                </div>
                <div class="control-group">
                    <label for="categoryId" class="control-label"><span class="label label-info">CategoryID</span></label>

                    <div class="controls">
                        <input type="text" class="form-control" id="categoryId" placeholder="categoryId" name="categoryId" style="width: 150px;">
                        <button  class="btn"  type="button" data-toggle="modal" data-target="#myModal" >类目</button>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="button" class="btn" id="load_attr">获取属性</button>&nbsp;
                    </div>
                </div>
                <div class="control-group">
                    <label for="attributes" class="control-label"><span class="label label-info">Attributes</span></label>

                    <div class="controls">
                        <textarea class="form-control" rows="5" id="attributes" name="attributes" style="width: 500px;"></textarea>

                    </div>
                </div>
                <div class="control-group">
                    <label for="productPrice" class="control-label"><span class="label label-info">ProductPrice</span></label>

                    <div class="controls">
                        <input type="text" class="form-control" id="productPrice" placeholder="productPrice" name="productPrice" style="width: 150px;">
                    </div>
                </div>
                <div class="control-group">
                    <label for="deliveryTime" class="control-label"><span class="label label-info">DeliveryTime</span></label>

                    <div class="controls">
                        <input type="text" class="form-control" id="deliveryTime" placeholder="deliveryTime" name="deliveryTime" style="width: 150px;">
                    </div>
                </div>
                <div class="control-group">
                    <label for="url" class="control-label"><span class="label label-info">Urls of Image</span></label>

                    <div class="controls">
                        <input type="text" class="form-control" id="url" placeholder="最多6张" name="url" style="width: 450px;">
                    </div>
                </div>
                <div class="control-group">
                    <label for="id" class="control-label"><span class="label label-info">Your ID</span></label>

                    <div class="controls">
                        <input type="text" class="form-control" id="id" value="${id}" placeholder="deliveryTime" name="id" style="width: 150px;">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="submit" class="btn">Sync</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Site footer -->
    <div class="footer">
        <p>&copy; 6ks.com 2014</p>
    </div>
</div>
<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  >&times;</button>
        <h3>叶子目录</h3>
    </div>
    <div class="modal-body">
        <div class="catecode">
        <ul>
            <c:forEach items="${categories}" var="cate">
                <li><a href="javascript:void(0);" class="category" data-dismiss="modal">${cate.id}</a>${cate.zhName}</li>
            </c:forEach>
        </ul>
        </div>

    </div>
    <div class="modal-footer">
        <a href="#"  data-dismiss="modal" class="btn">关闭</a>
    </div>
</div>
</body>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/resources/js/jquery.js"></script>
<script src="/resources/js/bootstrap-modal.js"></script>
<script src="/resources/js/jquery.messager.js"></script>
<script src="/resources/js/json2.js"></script>
<script type="text/javascript">
    $(".category").click(function(){
        $("#categoryId").val($(this).text());
    });
    $("#load_attr").click(function(){
        var cateId = $("#categoryId").val();
        if(cateId == ""){
            alert("先选择类目");
            return;
        }
        $.ajax({ //一个Ajax过程
            type: "get",  //以post方式与后台沟通
            url : "/category/attr", //
            data: 'cateId='+cateId, //
            success: function(json){//如果调用
                $("#attributes").val(JSON.stringify(json));
            }
        });
    });
    $(function () {
//        $.messager.lays(200, 120, "left");
//        $.messager.anim('fade', 1000);
//        $.messager.show("提示信息", "我要买衣服",0);
    });
</script>
</html>